<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>盒子模型案例</title>
    <style>
        div {
            margin: 0 auto;
        }
        div.box {
            border: solid saddlebrown 1px;
            width:300px;
            height: 350px;
            background-color: white;
        }
        img {
            padding: 1px;
            width: 298px;
            height: 198px;
        }
        p {
           
            font-size: 14px;
           margin: 5px 20px 15px;
           
        }
        div.re {
            font-size: 10px;
            color:gray;
            margin: 5px 20px 15px;
        }
        h3.title {
            
            font-size: 12px;
            margin: 5px 20px 15px;
            display: inline-block;
        }
        h3.price {
            color: orange;
            font-size: 12px;
            margin: 5px 20px 15px;
            margin-left: 50px;
            display: inline-block;
            text-align: right;
        }
        /* * {
            padding: 0; margin: 0;
        }
        body {
            background-color: gray;
        }
        h1 {
            width: 300px; margin: 0 auto; color: green;
        }
        div.box {
            margin: 20px auto;
            width: 298px;
            height: 415px;
            background-color: white;
        } */
    </style>
</head>

<body>
    <div id="root">
      
        <h1 style="width: 300px;margin: 0 auto;text-align: center;">产品模块</h1>
        <div class="box">
            <img src="/picture/all.jpeg" alt="">
         
            <p>{{word}}</p>
            <div class="re">{{re}}</div>
            <div>
                <h3 class="title">小米蓝牙耳机air2</h3>
                <h3 class="price">99.99元</h3>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word:Mock.mock('@cword(20)'),
                re:Mock.mock('@cword(10)')
            }
        },
    })
</script>

</html>